{extend name="index/index"}
{block name="mycss"}
<link rel="stylesheet" type="text/css" href="static/index/personal/css/edit.css">
<link rel="stylesheet" type="text/css" href="static/index/css/toastr.css">
{/block}
{block name="fjs"}
<script src="static/index/js/jquery.min.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="static/index/js/toastr.js" type="text/javascript" charset="utf-8" async defer></script>
{/block}
{block name="main"}
<div class="container mt10" >
    <div class="row">
        <div class="col-md-8">
            <div class="col-md-3 "><a href="{:url('index/details/home')}" class="btn btn-success" style="margin-left: -30px;position:relative;">返回个人主页</a></div>
        </div>
    </div>
</div>
<div class="container mt10" style="background-color: #ffff">
    <div class="row">
        <div class="col-md-8" >
            <div class="col-md-3 mt10">
                <span class="h2 ">基本信息</span>
            </div>
            <form action="{:url('index/personal/doEdit')}" method="post"  enctype="multipart/form-data">
                <div class="col-md-12 mt50">
                    <div class="col-md-2 mt50 mr50 h4"><span>头像:</span></div>
                    <div class="div-col-md-2">
                    {if $data.icon}
                        <img src="http://pdyc9epam.bkt.clouddn.com/{$data['icon']}" class="img-circle" style="width: 100px;height: 100px">
                    {else /}
                        <img src="/static/default.jpg" class="img-circle" style="width: 100px;height: 100px">
                    {/if}
                    </div>
                    <div class="div-col-md-1 col-md-offset-5">
                        <div class="upload btn-success btn">
                          更换头像
                          <input type="file" name="myfile">
                        </div>
                    </div>
                </div>
                <div class="col-md-12 mt50 mr50">
                    <div class="col-md-2  h4"><span>昵称:</span></div>
                    <div class="col-md-2 col-md-pull-1">
                       <input class="nickname" type="text" name="nickname" maxlength="6" value="{$data['nickname']}">
                    </div>
                </div>
                <div class="col-md-12 mt50 mr50">
                    <div class="col-md-2  h4"><span>性别:</span></div>
                    <div class="col-md-10 col-md-pull-1">
                        <div class="col-md-2  mt10">
                            {if condition="$data.sex eq 0"}
                            <input type="radio" name="sex" value="0" checked>
                            {else/}
                            <input type="radio" name="sex" value="0" >
                            {/if}
                           <span class="h4">女</span>
                        </div>
                        <div class="col-md-2  mt10">
                            {if condition="$data.sex eq 1"}
                            <input type="radio" name="sex" value="1" checked>
                            {else/}
                            <input type="radio" name="sex" value="1" >
                            {/if}
                           <span class="h4">男</span>
                        </div>
                        <div class="col-md-2 mt10">
                            {if condition="$data.sex eq 2"}
                            <input type="radio" name="sex" value="2" checked>
                            {else/}
                            <input type="radio" name="sex" value="2" >
                            {/if}
                           <span class="h4">保密</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 mt50 mr50">
                    <div class="col-md-2  h4"><span>签名:</span></div>
                    <div class="col-md-2 col-md-pull-1">
                       <input class="nickname" type="text" name="sign" maxlength="20" placeholder="一句话描述自己不超过20汉字" value="{$data['sign']}">
                    </div>
                </div>
                <div class="col-md-12 mt50 mr50">
                    <div class="col-md-2  h4"><span>身份证:</span></div>
                    <div class="col-md-2 col-md-pull-1">
                        <?php if (isset($data['id_number'])): ?>
                            <a href="javascript:void(0)" ><div class="upload btn-success btn"  >
                            已认证
                        </div></a>
                        <?php else: ?>
                       <a href="idcard" ><div class="upload btn-success btn"  >
                            实名认证
                        </div></a>
                        <?php endif ?>
                    </div>
                </div>
                <div class="col-md-12 mt50 mr50">
                    <div class="col-md-2  h4"><span>邮箱:</span></div>
                    <div class="col-md-2 col-md-pull-1 mt10">
                        {if condition="$data.email"}
                            <span class="h5 email">{$data['email']}</span>
                        {else/}
                            <span class="h5 email">修改添加邮箱</span>
                        {/if}
                    </div>
                    <div class="col-md-2  mt10">
                        <span class="h5 change change_email " data-toggle="modal" data-target="#myModal">修改</span>
                    </div>
                </div>
                <div class="col-md-12 mt50 mr50">
                    <div class="col-md-2  h4"><span>电话:</span></div>
                    <div class="col-md-2 col-md-pull-1 mt10">
                        <span class="h5 email">{$data['tel']}</span>
                    </div>
                    <div class="col-md-2  mt10">
                        <span class="h5 change change_tel"  data-toggle="modal" data-target="#telModal">修改</span>
                    </div>
                </div>
                <div class="col-md-12 mt50 mr50">
                    <div class="col-md-2  h4"><span>QQ:</span></div>
                    <div class="col-md-2 col-md-pull-1">
                       <input class="nickname" type="text" name="qq" value="{$data['qq']}">
                    </div>
                </div>
                <div class="col-md-3 mt50 col-md-offset-3">
                    <button class="btn btn-success">确认修改    </button>
                </div>
                    <div class="col-md-12">
                    </div>
            </form>
        </div>
    </div>
<!-- emailModal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title h1" id="myModalLabel">邮箱</h3>
      </div>
        <div class="col-md-12 mt10">
            <div class="col-md-3 h3">邮箱:</div>
            <div class="col-md-6  mt20">
                <input type="email" class="change-email" name="email" placeholder="输入常用邮箱" value="" style="width: 200px;height: 30px">
            </div>
            <div class="col-md-2 mt20 col-md-pull-1"><button type="button" class="btn btn-success  emailcode-btn">发送验证码</button></div>
        </div>
        <div class="col-md-12 mt10">
            <div class="col-md-3 h3">验证码:</div>
            <div class="col-md-6  mt20">
                <input type="email" class="emailcode" name="email-code"  maxlength="4" placeholder="邮箱验证码" value="" style="width: 200px;height: 30px">
            </div>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary email-btn">保存</button>
      </div>
    </div>
  </div>
</div>
<!-- end email -->
<!-- tellModal -->
<div class="modal fade" id="telModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title h1" id="myModalLabel">电话</h3>
      </div>
        <div class="col-md-12 mt10">
            <div class="col-md-3 h3">电话:</div>
            <div class="col-md-6  mt20">
                <input type="text" maxlength="11" class="change-tel" name="tel" placeholder="输入常用手机" value="" style="width: 200px;height: 30px">
            </div>
            <div class="col-md-2 mt20 col-md-pull-1"><button type="button" class="btn btn-success telcode-btn">发送验证码</button></div>
        </div>
        <div class="col-md-12 mt10">
            <div class="col-md-3 h3">验证码:</div>
            <div class="col-md-6  mt20">
                <input type="text" class="telcode" name="tel-code" placeholder="手机验证码" value="" style="width: 200px;height: 30px">
            </div>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary tel-btn">保存</button>
      </div>
    </div>
  </div>
</div>
<!-- end telemail -->
</div>

<script>
    toastr.options = {
        closeButton: true,
        progressBar: true,
        timeOut: '3000',
        positionClass: "toast-top-center",
    };
    $(function(){
    // 处理邮箱发送验证码
        $('.emailcode-btn').click(function(){
           var email =  $('.change-email').val();
           if(email){
                $.ajax({
                    type:'post',
                    data:{'email':email},
                    url:'emailCode',
                    success:function(data){
                        if(data.status){
                            toastr.success(data.info);
                        }else{
                            toastr.error(data.info);
                        }
                    },
                    error:function(){
                        toastr.success('发送成功');
                    }
                });
           }else{
                toastr.error('邮箱不能为空');
           }
    });
    });


    //处理邮箱编辑
    $('.email-btn').click(function(){
        var emailCode = $('.emailcode').val();
        var email =  $('.change-email').val();
        $.ajax({
            type:'post',
            data:{
                'emailCode':emailCode,
                'email':email
            },
            url:'doEmail',
            success:function(data){
                if(data.status){
                toastr.success('修改成功');
                window.location.reload();
                }else{
                toastr.error('验证码错误');
                }
            },
            error:function(){
                toastr.error('验证码错误');
            },
        });
    });

    //处理手机短信验证码
    $('.telcode-btn').click(function(){
        var tel = $('.change-tel').val();
        $.ajax({
            type:'post',
            url:'domsg',
            data:{'phone':tel},
            dataType:'json',
            success:function(data){
                if(data.status){
                    toastr.success(data.info);
                }else{
                    toastr.error(data.info);
                }
            },
            error:function(){
                toastr.error('验证码发送失败');
            }
        });
    });

    //处理手机编辑
    $('.tel-btn').click(function(){
        var telCode = $('.telcode').val();
        var tel =  $('.change-tel').val();
    $.ajax({
            type:'post',
            data:{
                'telCode':telCode,
                'tel':tel
            },
            url:'doPhone',
             success:function(data){
                if(data.status){
                toastr.success('修改成功');
                window.location.reload();
                }else{
                toastr.error('验证码错误');
                }
            },
            error:function(){
                toastr.error('验证码错误11');
            }
        });
    });
</script>
{/block}
